<script setup>
import {computed, nextTick, onMounted, reactive, ref} from 'vue'
import request from '@/utils/request'
import router from "@/router";

const userInfo = ref({
  avatar :'',
  birthday:'',
  email:'',
  gender:'',
  id:undefined,
  nickname:'',
  phoneNum:'',
  roleIds:'',
  status:'',
  documentType: '',
  documentNumber: '',
})
//驾照信息
const driverLicenseInfo = ref({
  name :'',
  gender:'',
  birthday:'',
  emergencyContact:'',
  emergencyPhone:'',
  auditing:'',
  licenseNumber:'',
  validDateStart:'',
  validDateEnd:'',
  address:''
})

//用户证件信息
const authenticationInfo = ref({
  name :'',
  authenticationType:'',
  authenticationNumber:'',
  nationality:'',
  birthday:'',
  validDateStart:'',
  validDateEnd:''

})
//加载用户驾照
const driverLicenseFlag = ref(true)
const driverLicenseAuditing = ref(3)
const loadDriverLicenseInfo = ()=> {
  request.get(`/users/driverlicense`).then(res => {
    console.log(res.data)
    //没有找到认证信息
    if(res.data === null){
      driverLicenseFlag.value=false
    }else{
      driverLicenseAuditing.value = res.data.auditing
      Object.assign(driverLicenseInfo.value,res.data)
    }
  })
}
//加载用户证件信息
const authenticationFlag = ref(true)
const authenticationAuditing = ref(3)
const loadUserAuthenticationInfo = ()=> {
  request.get(`/users/authentication`).then(res => {
    console.log(res.data)
    //没有找到认证信息
    if(res.data === null){
      authenticationFlag.value=false
    }else{
      authenticationAuditing.value = res.data.auditing
      Object.assign(authenticationInfo.value,res.data)
      authenticationInfo.value.authenticationType = authenticationFormatter(authenticationInfo.value.authenticationType)
    }

  })
}




const dialogFormRef = ref()
const loadUserinfo =()=> {
  request.get(`/users/myinfo`).then(res => {

    userInfo.value = res.data
    userInfo.value.gender = userInfo.value.gender.toString()
    console.log(userInfo.value)
  })
}

//字典数值
const genderOptions = ref()
const authenticationOptions = ref()
const auditingOptions = ref([
  {
    value: 0,
    label: '认证成功'
  },
  {
    value: 1,
    label: '审核中'
  },
  {
    value: 2,
    label: '认证失败'
  },
  {
    value: 3,
    label: '未认证'
  }

])

const editInfoForm = ref({
  birthday : '',
  email:'',
  gender:'',
  nickname:'',
  avatar:''

})
const editDialogVisible = ref(false)
const handleEditDialogClose = ()=>{
  editDialogVisible.value=false;
}
//更新用户信息
const handleEdit = () =>{
  editDialogVisible.value = true
  editInfoForm.value = userInfo.value

}


//加载字典项----------------------------------------------------------------------
const loadAllDictOptions = ()=>{
  loadDictOptions(genderOptions,2)
  loadDictOptions(authenticationOptions,16)

}
//formatter-----------------------------------------------------------------
const genderFormatter = (val)=>{
  for(let index in genderOptions.value){
    if(genderOptions.value[index].value==val){
      val = genderOptions.value[index].label
      return val
    }
  }
  return val
}
const authenticationFormatter = (val)=>{

  for(let index in authenticationOptions.value){
    if(authenticationOptions.value[index].value==val){
      val = authenticationOptions.value[index].label
      return val
    }
  }
  return val
}
const auditingFormatter = (val)=>{

  for(let index in auditingOptions.value){
    if(auditingOptions.value[index].value==val){
      val = auditingOptions.value[index].label
      return val
    }
  }
  return val
}
onMounted(()=>{
  loadUserinfo()
  loadAllDictOptions()
  loadDriverLicenseInfo()
  loadUserAuthenticationInfo()
})

</script>

<template>
<div>
  <div style="width: 100%;height: 1000px; border: 1px solid rgb(220, 223, 230)">
    <div style="padding: 20px 20px">
      <h2>用户信息</h2>
      <el-row :gutter="10">
        <el-col :span="5">

        </el-col>
        <el-form ref="dialogFormRef" :model="userInfo"  label-width="150px" style="width: 50%">
          <el-col :span="24">
            <el-form-item label="昵称:" prop="nickname">
              <el-input readonly v-model="userInfo.nickname" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="性别:" prop="gender">
              <el-input readonly v-model="userInfo.gender" style="width: 100%;" :formatter="genderFormatter"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="电子邮箱:" prop="email">
              <el-input readonly v-model="userInfo.email" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="电话号码:" prop="phoneNum">
              <el-input readonly v-model="userInfo.phoneNum" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="姓名:" >
              <el-input readonly v-model="authenticationInfo.name" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="24" style="position: relative">
            <el-form-item label="证件类型:" >
              <el-input readonly v-model="authenticationInfo.authenticationType" style="width: 100%;" placeholder="未认证"/>
              <span v-if="authenticationAuditing!==3" style="position: absolute; right: 10px">{{auditingFormatter(authenticationAuditing)}}</span>
              <el-button v-else link size="small" style="position: absolute; right: -60px;" @click="router.push('/center/authentication')">前往认证</el-button>

            </el-form-item>
          </el-col>
          <el-col :span="24" style="position: relative">
            <el-form-item label="证件号码:" >
              <el-input readonly v-model="authenticationInfo.authenticationNumber" style="width: 100%;" placeholder="未认证"/>
              <span v-if="authenticationAuditing!==3" style="position: absolute; right: 10px">{{auditingFormatter(authenticationAuditing)}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生日:">
              <el-input readonly v-model="authenticationInfo.birthday" style="width: 100%;" />
            </el-form-item>
          </el-col>


          <el-col :span="24" style="position: relative">
            <el-form-item label="驾驶证认证:">
              <el-input readonly v-model="driverLicenseInfo.licenseNumber" style="width: 100%;" placeholder="未认证"/>
              <span v-if="driverLicenseAuditing!==3" style="position: absolute; right: 10px">{{auditingFormatter(driverLicenseAuditing)}}</span>
              <el-button v-else link size="small" style="position: absolute; right: -60px;" @click="router.push('/center/driverlicense')">前往认证</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="紧急联系人姓名:">
              <el-input readonly v-model="driverLicenseInfo.emergencyContact" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="紧急联系人手机:" >
              <el-input readonly v-model="driverLicenseInfo.emergencyPhone" style="width: 100%;" />
            </el-form-item>
          </el-col>

        </el-form>
      </el-row>
      <el-row>
        <el-col :span="12">
        </el-col>
<!--        <el-col :span="12">-->
<!--          <el-button type="primary" @click="handleEdit">修改信息</el-button>-->
<!--          <el-button>修改密码</el-button>-->
<!--        </el-col>-->
      </el-row>
      <el-dialog v-model="editDialogVisible" title="修改信息" style="width: 600px" :before-close="handleEditDialogClose">




      </el-dialog>





    </div>


  </div>

</div>
</template>

<style scoped>
.qjx-user-info-left >div >span {
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;

}
.qjx-user-info-right >div >span{
  font-size: 20px;
  line-height: 20px;
  text-align: center;
}

.qjx-user-info-left >div, .qjx-user-info-right >div{
  margin-top: 20px;
}


</style>